<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客园页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font - awesome/5.15.3/css/all.min.css">
    <style>
        /* 整体布局 */
        body {
            font-family: Arial, sans-serif;
            color: white;
            background-color: #2b2d42;
            margin: 0;
            padding: 0;
        }

        /* 顶部导航栏 */
        .top-nav {
            background-color: #1d2025;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-bar {
            flex: 1;
            padding: 5px;
            border: none;
            border-radius: 5px;
        }

        .nav-icons {
            display: flex;
            gap: 10px;
        }

        /* 侧边栏 */
        .sidebar {
            background-color: #2b2d42;
            width: 200px;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* 主内容区 */
        .main-content {
            margin-left: 220px;
            padding: 20px;
        }

        /* 博客头部 */
        .blog-header {
            background-image: url('90.jpg');
            background-size: cover;
            background-position: center;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .blog-title {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .blog-info {
            font-size: 14px;
        }

        /* 博客文章列表 */
        .blog-articles {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .article {
            background-color: #33353c;
            padding: 10px;
            border-radius: 5px;
        }

        .article-title {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .article-summary {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .article-actions {
            display: flex;
            gap: 10px;
        }

        /* 右侧栏 */
        .right-sidebar {
            background-color: #2b2d42;
            width: 200px;
            height: 100vh;
            position: fixed;
            top: 0;
            right: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .calendar {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .calendar-day {
            background-color: #33353c;
            padding: 5px;
            border-radius: 5px;
            text-align: center;
        }

        .link-section {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .tag-section {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        /* 单独设置博客头像样式 */
        .blog-avatar {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <input type="text" class="search-bar" placeholder="search...">
        <div class="nav-icons">
            <i class="fas fa-envelope"></i>
            <i class="fas fa-bell"></i>
            <i class="fas fa-line-chart"></i>
            <i class="fas fa-user"></i>
        </div>
    </div>

    <!-- 侧边栏 -->
    <div class="sidebar">
        <i class="fas fa-bookmark"></i> 博客园
        <i class="fas fa-home"></i> 首页
        <i class="fas fa-pencil"></i> 新随笔
        <i class="fas fa-file"></i> 草稿箱
        <i class="fas fa-envelope"></i> 联系
        <i class="fas fa-rss"></i> 订阅
        <i class="fas fa-cog"></i> 管理
        <i class="fas fa-code"></i> CSDN主页
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 博客头部 -->
        <div class="blog-header">
            <div class="blog-motto">
                <i class="fas fa-lightbulb"></i> 有理想，但不妄想，
                <i class="fas fa-star"></i> 有希望，但不奢望，
                <i class="fas fa-wrench"></i> 有作为，但不妄为。
            </div>
            <div class="blog-profile">
                <img src="OIP-C.jpg" alt="博主头像" class="blog-avatar">
                <span class="blog-title">LogicYarn</span>
                <span class="blog-follow"><i class="fas fa-plus"></i> 关注</span>
            </div>
            <div class="blog-info">
                园龄：10个月 粉丝：0 关注：4
            </div>
            <div class="blog-tabs">
                <span>收藏</span>
                <span>闪存</span>
                <span>小组</span>
                <span>博问</span>
            </div>
        </div>

        <!-- 博客文章列表 -->
        <div class="blog-articles">
            <!-- 文章1 -->
            <div class="article">
                <span class="article-title">博客园博客申请教程，附自定义漂亮主页样式详细教程---2024</span>
                <div class="article-summary">
                    摘要：最近在自定义博客园主题页面样式时，遇到一些问题。所以决定写下此文作为第一篇博客。
                    一、申请开通个人博客 1.1 注册账号（步骤略） 1.2 申请写博客权限 在注册完博客园账号后，在首页右上角点击 -> 我的博客 点击后，会出现如下图所示：按照要求填写申请理由（例如记录个人技术成长，学习笔记记录等）
                </div>
                <div class="article-actions">
                    <i class="fas fa-comment"></i> 6
                    <i class="fas fa-bubbles"></i> 0
                    <i class="fas fa-thumbs-up"></i> 0
                    <button class="article-edit" aria-label="编辑文章">编辑</button>
                    <button class="article-read" aria-label="阅读文章">阅读</button>
                </div>
            </div>
            <!-- 文章2 -->
            <div class="article">
                <span class="article-title">一名iCer的博客开帖记录</span>
                <div class="article-summary">
                    摘要：前言 看园子内容已有3-4年之久，虽然对于一名iCer来说，园子内容偏少。但是仍然“咸鱼ic”等一众大佬的优质好文，让我知道这是我未来学习技术的一个好地方。也在我心中埋下了一个未来自己也要开始撰写博文的念想，选择园子，希望能够在记录学习笔记的同时，也为开源世界贡献自己的力量！由于本人有较重度的“健
                </div>
                <div class="article-actions">
                    <i class="fas fa-comment"></i> 5
                    <i class="fas fa-bubbles"></i> 0
                    <i class="fas fa-thumbs-up"></i> 0
                    <button class="article-edit" aria-label="编辑文章">编辑</button>
                    <button class="article-read" aria-label="阅读文章">阅读</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧栏 -->
    <div class="right-sidebar">
        <div class="featured-image">
            <img src="featured.jpg" alt="特色图片">
            <div class="image-caption">
                Autumn Wonderland
                <br>
                14 Aug, 2024
            </div>
        </div>
        <div class="calendar">
            <div class="calendar-header">
                <span><</span>
                <span>2024年8月</span>
                <span>></span>
            </div>
            <div class="calendar-days">
                <div class="calendar-day">日</div>
                <div class="calendar-day">一</div>
                <div class="calendar-day">二</div>
                <div class="calendar-day">三</div>
                <div class="calendar-day">四</div>
                <div class="calendar-day">五</div>
                <div class="calendar-day">六</div>
                <div class="calendar-day">28</div>
                <div class="calendar-day">29</div>
                <div class="calendar-day">30</div>
                <div class="calendar-day">31</div>
                <div class="calendar-day">1</div>
                <div class="calendar-day">2</div>
                <div class="calendar-day">3</div>
                <div class="calendar-day">4</div>
                <div class="calendar-day">5</div>
                <div class="calendar-day">6</div>
                <div class="calendar-day">7</div>
                <div class="calendar-day">8</div>
                <div class="calendar-day">9</div>
                <div class="calendar-day">10</div>
                <div class="calendar-day">11</div>
                <div class="calendar-day">12</div>
                <div class="calendar-day">13</div>
                <div class="calendar-day" style="background-color: #4299e1;">14</div>
                <div class="calendar-day">15</div>
                <div class="calendar-day">16</div>
                <div class="calendar-day">17</div>
                <div class="calendar-day">18</div>
                <div class="calendar-day">19</div>
                <div class="calendar-day">20</div>
                <div class="calendar-day">21</div>
                <div class="calendar-day">22</div>
                <div class="calendar-day">23</div>
                <div class="calendar-day">24</div>
                <div class="calendar-day">25</div>
                <div class="calendar-day">26</div>
                <div class="calendar-day">27</div>
                <div class="calendar-day">28</div>
                <div class="calendar-day">29</div>
                <div class="calendar-day">30</div>
                <div class="calendar-day">31</div>
                <div class="calendar-day">1</div>
                <div class="calendar-day">2</div>
                <div class="calendar-day">3</div>
                <div class="calendar-day">4</div>
                <div class="calendar-day">5</div>
                <div class="calendar-day">6</div>
                <div class="calendar-day">7</div>
            </div>
        </div>
        <div class="link-section">
            <span>常用链接</span>
            <button>我的随笔</button>
            <button>我的评论</button>
            <button>我的参</button>
            <button>最新评论</button>
            <button>我的标签</button>
        </div>
        <div class="tag-section">
            <span>我的标签</span>
            <span>博客撰写(1)</span>
        </div>
    </div>
</body>

</html>